<template>
          <div class="month-table">
        <img src="@/assets/images/month-title.png" alt="" />
        <div ref="chartRef" style="width: 100%; height: 86.16%;"></div>
      </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import {getDailyusage} from "@/api/api.js";


// 创建对 DOM 元素的引用
const chartRef = ref(null);
let option
const  dailyUsageValue= ref([])
const  daily= ref([])
let seriesData 
onMounted(() => {
  // 在 DOM 挂载后初始化 ECharts
  const myChart = echarts.init(chartRef.value);


  getDailyusage().then((res)=>{
    res.data.forEach(element => {
      daily.value.push(element.day) 
      dailyUsageValue.value.push(element.count) 
    });
    seriesData = dailyUsageValue.value.map(value => {
  if (value === 0) {
    return { value, itemStyle: { color: 'rgb(72, 78, 87)' } }; // 数值为 0 时设置为红色
  }
  return value;
});

myChart.setOption({
  xAxis: {
    type: 'category',
    data: daily.value,
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0)' // 设置 X 轴轴线的颜色为红色
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgb(255, 255, 255)' // 设置 X 轴标签的字体
      },
      interval: 0,
      formatter: function(value) {
        let res = ""; // 拼接加\n返回的类目项
        let maxLength = 3; // 每项显示文字个数，这里设置为2表示每两个字换一行
        let valLength = value.length; // X轴上的文字个数
        let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
        if (rowN > 1) {
          for (let i = 0; i < rowN; i++) {
            let temp = ""; // 每次截取的字符串
            let start = i * maxLength; // 开始截取的位置
            let end = start + maxLength; // 结束截取的位置
            temp = value.substring(start, end) + "\n";
            res += temp; // 拼接字符串
          }
          return res;
        } else {
          return value;
        }
      },
    },
  },
  series: [
    {
      type: 'bar',
      barWidth:'48.28%',
     data:seriesData,
      barMinHeight: '10',
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置在柱子顶部
        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
      itemStyle: {
        barBorderRadius: [10, 10, 10, 10], // 设置柱子的圆角效果
        color: 
          function (params) {
        // 根据 params 的 dataIndex 设置颜色
        var colorList = ['rgb(24, 254, 240)', 'rgb(93, 252, 165)'];
        return colorList[params.dataIndex % colorList.length];
      }

        
      }
    }
  ]
})
  })

  // 设置图表的配置项和数据
  option = {
    grid: {
    left: '-2.97%', // 距离容器左边的距离
    right: '0.97%', // 距离容器右边的距离
    top: '15.09%', // 距离容器顶部的距离
    bottom: '7.71%', // 距离容器底部的距离
    containLabel: true // 是否包含坐标轴刻度标签
  },
  xAxis: {
    type: 'category',
    data: ['01', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02','03','04','01', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02', '02','03','04'],
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0)' // 设置 X 轴轴线的颜色为红色
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgb(255, 255, 255)' // 设置 X 轴标签的字体
      },
      interval: 0,
      formatter: function(value) {
        let res = ""; // 拼接加\n返回的类目项
        let maxLength = 2; // 每项显示文字个数，这里设置为2表示每两个字换一行
        let valLength = value.length; // X轴上的文字个数
        let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
        if (rowN > 1) {
          for (let i = 0; i < rowN; i++) {
            let temp = ""; // 每次截取的字符串
            let start = i * maxLength; // 开始截取的位置
            let end = start + maxLength; // 结束截取的位置
            temp = value.substring(start, end) + "\n";
            res += temp; // 拼接字符串
          }
          return res;
        } else {
          return value;
        }
      },
    },
  },
  yAxis: {
    show:false
    // type: 'value'
  },
  series: [
    {
      type: 'bar',
      barWidth:'48.28%',
     data:seriesData,
      barMinHeight: '10',
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置在柱子顶部
        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
      itemStyle: {
        barBorderRadius: [10, 10, 10, 10], // 设置柱子的圆角效果
        color: 
          function (params) {
        // 根据 params 的 dataIndex 设置颜色
        var colorList = ['rgb(24, 254, 240)', 'rgb(93, 252, 165)'];
        return colorList[params.dataIndex % colorList.length];
      }

        
      }
    }
  ]
};

  // 使用配置项和数据显示图表
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
  .month-table {
    width: 100%;
    height: 100%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
    // background-color: rgba(20, 30, 43, 0.63);
    backdrop-filter: blur(5px); /* 创建毛玻璃效果 */
    > img {
      width: 100%;
    }
  }
</style>